Ext.ns('app.crud.modules');

app.crud.modules.canEdit = false;
app.crud.modules.canDelete = false;

Ext.define('app.crud.modules.Model', {
    extend: 'Ext.data.Model',
    fields: [
         {name:'name'},
 	     {name:'dev' , type:'boolean'},
 	     {name:'active', type:'boolean'},	 	        
 	     {name:'title'}
    ]
});

Ext.define('app.crud.modules.Main',{
    extend:'Ext.Panel',
	dataStore:null,
	dataGrid:null,
	searchField:null,
	saveButton:null,
	
	constructor: function(config) {			
		config = Ext.apply({
			layout:'fit'
	    }, config);		
		this.callParent(arguments);
	},
	
	initComponent: function(){
		
		this.saveButton = new Ext.Button({
			hidden:!app.crud.modules.canEdit,
			text:'Save',
			scope:this,
			handler:this.saveAction
		});
		
		var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1});
		this.dataStore = Ext.create('Ext.data.Store' , {
		    model:'app.crud.modules.Model',
		 	autoLoad:true,
		 	autoSave:false,
			proxy:{
				type: 'ajax',
			    api: {
			        read    : app.root + 'list',
			        update  : app.root + 'update'
			    },
			    reader: {
		            type: 'json',
		            root: 'data',
		            idProperty: 'name'
		        },
		        actionMethods : {
		    		create : 'POST',
		    		read   : 'POST',
		    		update : 'POST',
		    		destroy: 'POST'
		    	},
		    	simpleSortMode: true,
		    	writer:{
					writeAllFields:true,
				    encode: true,   
				    listful:true,
				    root:'data'
				}
			},
			sorters: [{
                  property : 'title',
                  direction: 'ASC'
            }]
		});

	   this.dataGrid = Ext.create('Ext.grid.Panel',{
				  store: this.dataStore,
				  viewConfig:{
					  stripeRows:true
				  },
				  frame: false,
			      loadMask:true,
				  columnLines: true,
				  autoScroll:true,
				  selModel: {
			            selType: 'cellmodel'
			      },
			      columns: [
						{
						    text: 'Title',
						    dataIndex: 'title',
						    id:'title',
						    width:200,
						    align:'left',
						    editor:{
						    	xtype:'textfield'
						    },
						    editable:app.crud.modules.canEdit
						},{
							text:'Controller',
							dataIndex:'name',
							align:'left',
							width:170
			             },{
			            	text: 'Dev',
				            dataIndex: 'dev',
				            align:'center',
				            width:60,
				            id:'dev',
				            renderer:app.checkboxRenderer,
				            editor:{
				            	xtype:'checkbox'
				            },
				            editable:app.crud.modules.canEdit
					      },{
					    	  text: 'Active',
						    dataIndex: 'active',
						    width:60,
						    align:'center',
						    id:'active',
						    renderer:app.checkboxRenderer,
						    editor:{
				            	xtype:'checkbox'
				            },
				            editable:app.crud.modules.canEdit
						}
			    ],
			    plugins: [cellEditing],
			    buttons:[this.saveButton]
	   });
	   
	  this.items = [this.dataGrid];
	  this.callParent(arguments); 
   },
   saveAction:function(){
	   this.dataStore.save();
   }
});


Ext.onReady(function(){
	
	app.crud.modules.canEdit = canEdit;
	app.crud.modules.canDelete = canDelete;
	
	var dataPanel = Ext.create('app.crud.modules.Main',{
		title:'Modules :: Home'
	});
	
	app.content.add(dataPanel);	
});
